<template>
    <div class="search">
        <div class="search-wrapper">
            <el-input placeholder="请输入药品名称" v-model="drugName"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
        <div class="drug-list-wrapper" v-show="searchDrugs.length!==0">
            <drugList v-if="searchDrugs.length!==0" :drugs="searchDrugs"></drugList>
            <div v-else class="drug-empty">没有搜索到药品，嘿嘿嘿</div>
            <div class="pagination-wrapper">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="10"
                        :total="100"
                        :current-page.sync="currentPage"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import drugList from "@/components/drugList/drugList";

    export default {
        props: {
            searchDrugs: {
                type: Array
            }
        },
        data() {
            return {
                currentPage: 1,
                drugName: ''
            }
        },
        components: {
            drugList
        },
        methods: {
            search() {
                this.$emit('search');
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .search {
        width 1000px
        margin auto

        .search-wrapper {
            display flex
            justify-content center
            width 50%
            margin 10px auto

            .el-input {
                padding-right 20px
            }
        }

        .drug-list-wrapper {
            width 1000px
            height 800px
            margin auto
            box-shadow 0 0 50px darkgray
            border-radius 20px
            margin-bottom 20px

            .drug-empty {
                height 740px
                text-align center
                padding-top 100px
                font-size 30px
                color #007bff
            }

            .pagination-wrapper {
                display flex
                justify-content center
            }
        }
    }
</style>
